<template>
  <div id="password-view" class="stepper">
    <div class="upper">
      <div class="title">{{action=='set'?'设置':'修改'}}登录密码</div>
    </div>
    <div class="desc">
      您可以使用新设置的密码在平安到家APP、小程序和公众号登录您
      <a>{{this.securePhone}}</a>账号
    </div>
    <div class="input-field" v-if="$route.query.type==2">
      <md-field class="phone-input">
        <md-field-item>
          <md-input-item
            name="originPassword"
            data-vv-name="原密码"
            ref="originPassword"
            v-model="originPassword"
            v-validate="'required|loginPassword'"
            placeholder="输入原登录密码"
            :maxlength="12"
            :type="showOriginPassword?'text':'password'"
            size="large"
          >
            <md-icon :name="showOriginPassword?'yincang_icon':'xianshi_icon'" slot="right" @click="showOriginPassword=!showOriginPassword"></md-icon>
          </md-input-item>
        </md-field-item>
      </md-field>
    </div>
    <div class="input-field">
      <md-field class="phone-input">
        <md-field-item>
          <md-input-item
            name="newPassword"
            data-vv-name="新密码"
            ref="newPassword"
            v-model="newPassword"
            v-validate="'required|loginPassword'"
            placeholder="输入新登录密码"
            :maxlength="12"
            :type="showNewPassword?'text':'password'"
            size="large"
          >
            <md-icon :name="showNewPassword?'yincang_icon':'xianshi_icon'" slot="right" @click="showNewPassword=!showNewPassword"></md-icon>
          </md-input-item>
        </md-field-item>
      </md-field>
    </div>
    <div class="sub-input">密码为6～12位数字及字母的组合，区分大小写</div>
    <md-button @click="submit" :disabled="enableSubmit">提交</md-button>
  </div>
</template>
<script>
import '@/assets/svgs/snyc_nav_fh.svg';
import '@/assets/svgs/xianshi_icon.svg';
import '@/assets/svgs/yincang_icon.svg';
import { Field, InputItem, FieldItem, Button, Toast, Icon, Dialog } from 'mand-mobile';
import { mapGetters } from 'vuex';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Loading from '@/components/loading';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
export default {
  name: 'change-login-password-view',
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  created() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      http.post('/pakj/passenger/getUserInfo').then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          this.currentPhone = decryptByDESModeEBC(res.data.data.user_phone);
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    } else {
      if (this.currentUser.user_phone !== '') {
        this.currentPhone = this.currentUser.user_phone;
      }
    }
    if (this.$route.query.type) {
      this.currentType = this.$route.query.type;
    }
    if (this.$route.query.action) {
      this.action = this.$route.query.action;
      if (this.action === 'set') {
        document.title = '设置登录密码';
      } else {
        document.title = '修改登录密码';
      }
    }
  },
  data() {
    return {
      originPassword: '',
      newPassword: '',
      showOriginPassword: false,
      showNewPassword: false,
      currentPhone: '',
      currentType: 1,
      action: 'change'
    };
  },
  methods: {
    submit() {
      this.$validator.validateAll().then(res => {
        if (this.errors.has('原密码') || this.errors.has('新密码')) {
          Toast({
            content: this.errors.all()[0],
            duration: 2000
          });
          return;
        } else {
          if (this.currentType === 2) {
            this.TypeTwoSubmit();
          } else {
            this.TypeOneSubmit();
          }
        }
      });
    },
    TypeOneSubmit() {
      let params = {
        user_phone: encryptByDESModeEBC(this.currentPhone),
        user_pwd: CryptoJS.MD5(this.newPassword).toString()
      };
      this.$store
        .dispatch('changeLoginPassword2', params)
        .then(() => {
          this.changeLoginPasswordSuccess();
        })
        .catch(reason => {
          Toast({
            content: reason.message,
            duration: 3000
          });
        });
    },
    TypeTwoSubmit() {
      if (this.originPassword === this.newPassword) {
        Toast({
          content: '新密码与旧密码一致，请重新设置',
          duration: 3000
        });
        return false;
      }
      let params = {
        old_pwd: CryptoJS.MD5(this.originPassword).toString(),
        new_pwd: CryptoJS.MD5(this.newPassword).toString()
      };
      this.$store
        .dispatch('changeLoginPassword', params)
        .then(() => {
          this.changeLoginPasswordSuccess();
        })
        .catch(reason => {
          Toast({
            content: reason.message,
            duration: 3000
          });
        });
    },
    changeLoginPasswordSuccess() {
      let strContent = '';
      if (this.action === 'set') {
        strContent = '设置登录密码成功';
      } else {
        strContent = '修改登录密码成功';
      }
      Dialog.alert({
        title: '提示',
        content: strContent,
        confirmText: '确定',
        onConfirm: () => {
          if (Utils.isApp()) {
            // 判断当前环境是否在app
            /* eslint-disable */
            var os = Utils.getOSName();
            if ((os === 'Linux' || os === 'Android') && handler) {
              handler.pageOut();
            } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
              window.webkit.messageHandlers.pageOut.postMessage(JSON.stringify(''));
            }
          } else {
            this.$router.push({
              name: 'AccountSecurity'
            });
          }
        }
      });
    }
  },
  computed: {
    ...mapGetters(['currentUser']),
    enableSubmit() {
      let result = false;
      if (this.currentType === 2) {
        result = this.originPassword === '' && this.newPassword === '';
      } else {
        result = this.newPassword === '';
      }
      return result;
    },
    securePhone() {
      return this.currentPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    }
  }
};
</script>
<style lang="stylus">
#password-view {
  padding: 40px;

  a {
    color: color-primary;
  }

  .upper {
    margin-top: 62px;
  }

  .desc {
    margin-bottom: 80px !important;
  }

  .input-field {
    margin-bottom: 20px;
    border-bottom: 1px solid #E0E0E0;

    .left {
      margin-left: 0px !important;
    }

    .md-field-item-inner {
      padding: 0 0;
    }

    .md-field-item {
      padding: 0 0;
    }

    .md-input-item {
      padding: 0 0;

      ::-moz-placeholder {
        color: color-text-caption;
      }

      ::-webkit-input-placeholder {
        color: color-text-caption;
      }

      :-ms-input-placeholder {
        color: color-text-caption;
      }
    }
  }

  .sub-input {
    font-size: 24px;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
    line-height: 24px;
    margin-bottom: 58px;
  }
}
</style>